<template>
  <div>
    <!-- 顶部搜索栏 -->
    <Search/>
    <!-- 分类信息 -->
    <div class="category">
      <!-- 一级分类 -->
      <div class="sup">
        <scroll-view scroll-y @click='handleChange'>
          <text :data-id='item.cat_id' :class='{active: currentId===item.cat_id}' :key='item.cat_id' v-for='item in list'>
            {{item.cat_name}}
          </text>
        </scroll-view>
      </div>
      <!-- 二级和三级分类 -->
      <div class="sub">
        <scroll-view scroll-y>
          <!-- 封面图 -->
          <image src="http://static.botue.com/ugo/uploads/category.png" class="thumb"></image>
          <!-- 二级分类 -->
          <div class="children" :key='item.cat_id' v-for='item in rightData'>
            <div class="title">{{item.cat_name}}</div>
            <div class="brands">
              <!-- 三级分类：品牌 -->
              <navigator :key='brand.cat_id' v-for='brand in item.children'>
                <image :src="brand.cat_icon"></image>
                <text>{{brand.cat_name}}</text>
              </navigator>
            </div>
          </div>
        </scroll-view>
      </div>
    </div>
  </div>
</template>
<script>
  import Search from '@/components/search/index'
  export default {
    data() {
      return {
        title: 'Cate',
        currentId: 1,
        list: []
      }
    },
    onLoad() {
      this.loadCateData()
    },
    computed: {
      rightData () {
        // 根据分类的所有数据和当前选中的一级分类的数据获取右侧要展示的二级和三级分类
        const rd = this.list.filter(item => {
          return item.cat_id === this.currentId
        })
        // 获取二级分类的数据
        const cate = rd && rd.length > 0 && rd[0].children
        // 返回计算的结果
        return cate
      }
    },
    methods: {
      handleChange (e) {
        // 控制一级分类的切换操作
        this.currentId = e.target.dataset.id
      },
      async loadCateData () {
        const data = await this.$request('categories')
        if (data.meta.status === 200) {
          // 获取数据成功
          this.list = data.message
        } else {
          // 获取数据失败
          uni.showToast(data.meta.msg)
        }
      }
    },
    components: {
      Search
    }
  }
</script>
<style scoped lang="less">
  scroll-view {
    height: 100%;
  }

  .category {
    display: flex;
    width: 100%;
    position: absolute;
    top: 100rpx;
    bottom: 0;

    .sup {
      width: 196rpx;
      background-color: #f4f4f4;

      text {
        display: block;
        height: 100rpx;
        text-align: center;
        line-height: 100rpx;
        font-size: 27rpx;
        color: #333;
        border-bottom: 1rpx solid #eee;

        &:last-child {
          border-bottom: none;
        }
        
        &.active {
          background-color: #FFF;
          color: #ea4451;
          position: relative;

          &::before {
            content: '';
            display: block;
            width: 8rpx;
            height: 60rpx;
            transform: translateY(-50%);
            background-color: #ea4451;

            position: absolute;
            left: 0;
            top: 50%;
          }
        }
      }
    }

    .sub {
      flex: 1;
      padding: 20rpx 18rpx;

      .thumb {
        width: 100%;
        height: 180rpx;
      }

      .children {
        text-align: center;
        color: #333;

        .title {
          display: inline-block;
          margin: 40rpx 0 20rpx;
          font-size: 30rpx;

          &::before {
            content: '/';
            margin-right: 20rpx;
            color: #666;
          }

          &::after {
            content: '/';
            margin-left: 20rpx;
            color: #666;
          }
        }
      }

      .brands {
        display: flex;
        flex-wrap: wrap;

        navigator {
          width: 33%;
          margin-bottom: 20rpx;
        }

        image {
          width: 120rpx;
          height: 120rpx;
        }

        text {
          display: block;
          font-size: 24rpx;
        }
      }
    }
  }
</style>